<!--http://pupunzi.com/#mb.components/mb.scrollable/scrollable.html-->
<html>
<head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="jquery.mb.scrollable\inc\mbScrollable.js"></script>

    <!--
    <link rel='stylesheet' href='jquery.mb.scrollable\css\mb.scrollable.css' type='text/css' />
-->

    <script type="text/javascript">
        $(function() {
            $("#scroller1 .myScroll").mbScrollable({
                width: 700,
                elementsInPage: 1,
                elementMargin: 4,
                shadow: "#999 2px 2px 2px",
                height: "auto",
                controls: "#scroller1 .controls",
                slideTimer: 600,
                autoscroll: false,
                scrollTimer: 2000
            });
        });

        $(function() {
            $("#scroller2 .myScroll").mbScrollable({
                width: 700,
                elementsInPage: 4,
                elementMargin: 4,
                shadow: "#999 2px 2px 2px",
                height: "auto",
                controls: "#scroller2 .controls",
                slideTimer: 600,
                autoscroll: false,
                scrollTimer: 2000
            });
        });
    </script>

    <style type="text/css">
        body
        {
            font-family: "Lucida Sans Unicode" , "Lucida Grande" ,Helvetica,Arial,sans-serif;
            font-size: 13px;
        }
        #wrapper
        {
            margin-top: 80px;
            display: none;
            margin: auto; /*width:1000px;*/
        }
        .myScroll .scrollEl
        {
            display: none;
            border: 1px solid #ddd;
            font-family: sans-serif;
            font-size: 180%;
            color: white;
            height: 100px;
            padding: 10px;
            padding-top: 60px;
            text-shadow: #999 1px 1px 1px;
            text-align: center;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            background: #ccc;
        }
        .controls div, .controls1 div
        {
            font-family: sans-serif;
            margin-top: 5px;
            background: #fff;
            display: inline-block;
            padding: 6px;
            cursor: pointer;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-box-shadow: #999 2px 2px 2px;
            -webkit-box-shadow: #999 2px 2px 2px;
        }
        .controls div.positiondisplay
        {
            background: #000;
            color: #fff;
            cursor: default;
        }
        .controls .sel, .controls1 .sel
        {
            color: black !important;
            font-weight: bold;
        }
        .controls .disabled, .controls1 .disabled
        {
            color: gray;
        }
        .controls .page, .controls1 .page
        {
            padding: 5px;
            color: gray;
        }
    </style>
</head>
<body>
    <div>
        <div id="scroller1">
            <table>
                <tr>
                    <td>
                        <div class="controls">
                            <div class="prev">
                                prev</div>
                        </div>
                    </td>
                    <td>
                        <div class="myScroll">
                            <div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div>
                                <div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div>
                                <div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div>
                                <div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div><div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div><div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div><div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div><div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div>
                        </div>
                    </td>
                    <td>
                        <div class="controls">
                            <div class="next">
                                next</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div class="controls">
                            <div class="pageIndex">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="scroller2">
            <table>
                <tr>
                    <td>
                        <div class="controls">
                            <div class="prev">
                                prev</div>
                        </div>
                    </td>
                    <td>
                        <div class="myScroll">
                            <div class="scrollEl">
                                this is my contrl1</div>
                            <div class="scrollEl">
                                2</div>
                            <div class="scrollEl">
                                3</div>
                            <div class="scrollEl">
                                4</div>
                            <div class="scrollEl">
                                5</div>
                            <div class="scrollEl">
                                6</div>
                            <div class="scrollEl">
                                7</div>
                            <div class="scrollEl">
                                8</div>
                        </div>
                    </td>
                    <td>
                        <div class="controls">
                            <div class="next">
                                next</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div class="controls">
                            <div class="pageIndex">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
